
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Parsley, the ultimate frontend javascript form validation library">
    <meta name="author" content="Guillaume Potier">

    <title>Parsley - Exemples | Multi steps form</title>

    <!-- Bootstrap core CSS -->
    <link href="../../bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="../assets/docs.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <link href="http://yandex.st/highlightjs/7.3/styles/github.min.css" rel="stylesheet">

    <link href="../../src/parsley.css" rel="stylesheet">
    <style>
      body {
        color: #111111;
      }
      .row {
        margin-top: 10px;
      }
      .code-block {
        margin-top: 20px;
      }
      .hidden {
        display: none;
      }
      .row h2 {
        color: #FF851B;
      }
      .row p {
        text-align: justify;
      }
      .first {
        padding-left: 15px;
        border-left: 2px solid #FF851B;
      }
      .second {
        padding-left: 15px;
        border-left: 2px solid #5bc0de;
      }
      .validate {
        margin-top: 10px;
      }
      h4 {
        margin-bottom: 10px;
      }
      .invalid-form-error-message {
        margin-top: 10px;
        padding: 5px;
      }
      .invalid-form-error-message.filled {
        border-left: 2px solid red;
      }
      .btn-info, .btn-default {
        margin-top: 10px;
      }
    </style>
  </head>

  <body>

    <div class="container">

      <div class="masthead">
        <div class="header">
          <h3 class="text-muted"><a href="../../">Parsley</a></h3>

          <span class="social-buttons inline-block">
            <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://parsleyjs.org" data-text="Parsley, the ultimate javascript form validation library. #parsleyjs" data-via="guillaumepotier" data-related="guillaumepotier" data-hashtags="parsleyjs">Tweet</a>
            <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

            <iframe src="http://ghbtns.com/github-btn.html?user=guillaumepotier&repo=Parsley.js&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>

            <iframe src="http://ghbtns.com/github-btn.html?user=guillaumepotier&repo=Parsley.js&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>
          </span>
        </div>
      </div>

      <ul class="nav nav-justified">
        <li><a href="../../">Home</a></li>
        <li class="active"><a href="../examples.html">Examples</a></li>
        <li><a href="../index.html">Documentation</a></li>
        <li><a href="../download.html">Download</a></li>
        <li><a href="../help.html">Help</a></li>
        <li><a href="../annotated-source/parsley.html">Annotated&nbsp;source</a></li>
        <li><a href="../tests.html">Tests</a></li>
      </ul>

      <div class="row">

      <!-- ###################### BEGIN OF EXAMPLE ######################-->

        <div class="col-md-4">
          <h2>Multi steps form demo</h2>
          <small class="pull-left"><a href="../examples.html">&lt;&lt; Back to examples</a></small>
          <span class="clearfix"></span>

          <hr></hr>
          <div class="form-group">
            <form id="demo-form" data-parsley-validate>
              <div class="first block1 show">
                <label for="fullname">Firstname:</label>
                <input type="text" class="form-control" name="firstname" required data-parsley-group="block1" />

                <label for="lastname">Lastname:</label>
                <input type="text" class="form-control" name="lastname" required data-parsley-group="block1" />
                <span class="next btn btn-info pull-right" data-current-block="1" data-next-block="2">Next ></span>
                <span class="clearfix"></span>
              </div>

              <div class="second block2 hidden">
                <label for="email">Email:</label>
                <input type="email" class="form-control" name="email" required data-parsley-group="block2" />
                <span class="next btn btn-info pull-left" data-current-block="2" data-next-block="1">&lt; Previous</span>
                <input type="submit" class="btn btn-default pull-right" />
                <span class="clearfix"></span>
              </div>
            </form>
          </div>
        </div>
        <div class="col-md-8">
          <div class="code-block">
<pre><code>&lt;form id="demo-form" data-parsley-validate>
  &lt;div class="first block1 show">
    &lt;label for="fullname">Firstname:&lt;/label>
    &lt;input type="text" name="firstname" data-parsley-group="block1" required/>

    &lt;label for="email">Lastname:&lt;/label>
    &lt;input type="text" name="lastname" data-parsley-group="block1" required />
    &lt;span class="next btn btn-info pull-right" data-current-block="1" data-next-block="2">Next >&lt;/span>
  &lt;/div>

  &lt;div class="second block2 hidden">
    &lt;label for="website">Email:&lt;/label>
    &lt;input type="text" name="fullname" required  data-parsley-type="email" data-parsley-group="block2" />
    &lt;span class="next btn btn-info pull-left" data-current-block="2" data-next-block="1">&lt; Previous&lt;/span>
    &lt;input type="submit" class="btn btn-default pull-right" />
  &lt;/div>
&lt;/form>

&lt;script type="text/javascript">
$(document).ready(function () {
  $('.next').on('click', function () {
    var current = $(this).data('currentBlock'),
      next = $(this).data('nextBlock');

    // only validate going forward. If current group is invalid, do not go further
    // .parsley().validate() returns validation result AND show errors
    if (next > current)
      if (false === $('#demo-form').parsley().validate('block' + current))
        return;

    // validation was ok. We can go on next step.
    $('.block' + current)
      .removeClass('show')
      .addClass('hidden');

    $('.block' + next)
      .removeClass('hidden')
      .addClass('show');

  });
});
&lt;/script>
</code></pre>
          </div>
        </div>
      </div>

      <!-- ###################### END OF EXAMPLE ######################-->

      <!-- Site footer -->
      <div class="footer">
        <p>&copy; <a href="https://twitter.com/guillaumepotier" title="Guillaume Potier on Twitter">Guillaume Potier</a> 2014 - <a href="http://wisembly.com">@Wisembly</a></p>
      </div>
    </div>

    <script type="text/javascript" src="../../bower_components/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="../../bower_components/bootstrap/js/affix.js"></script>
    <script type="text/javascript" src="http://yandex.st/highlightjs/7.3/highlight.min.js"></script>

    <script type="text/javascript" src="../../src/parsley.js"></script>
    <script type="text/javascript">

      $(document).ready(function () {
        $('.next').on('click', function () {
          var current = $(this).data('currentBlock'),
            next = $(this).data('nextBlock');

          // only validate going forward. If current group is invalid, do not go further
          // .parsley().validate() returns validation result AND show errors
          if (next > current)
            if (false === $('#demo-form').parsley().validate('block' + current))
              return;

          // validation was ok. We can go on next step.
          $('.block' + current)
            .removeClass('show')
            .addClass('hidden');

          $('.block' + next)
            .removeClass('hidden')
            .addClass('show');

        });
      });

      try {
        hljs.initHighlightingOnLoad();
      } catch ( err ) {}

      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-37229467-1']);
      _gaq.push(['_trackPageview']);

      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
    </script>
  </body>
</html>
